<template>
  <div>
    <div v-for="(item, index) in checkList" :key="index" class="w100 check_box">
      <div
        class="flex-x check_list "
        @click="changeCheck(item, index)"
        @dblclick="dbChangeCheck(item)"
      >
        <img
          v-if="item.iWind !== -1"
          src="@/assets/images/jk_icon_active.png"
          style="width: 18px;height: 18px;"
          alt=""
        />
        <img
          v-else
          src="@/assets/images/jk_icon.png"
          style="width: 18px;height: 18px;"
          alt=""
        />

        <span
          class="check_list_text"
          :style="{
            color:
              item.iWind == iWind || isCheck == index ? '#409EFF' : '#f7f7f7'
          }"
          >{{ item.VideoInputChannel.name }}</span
        >
      </div>
      <div v-if="showStreamIcon">
        <el-dropdown @command="val => handleCommand(val, item)">
          <span class="el-dropdown-link">
            <img
              :src="getStreamIcon(item.codeStreamValue)"
              alt=""
              style="width: 18px; height: 18px; cursor: pointer"
            />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :command="stream.value"
              v-for="stream in codeStreamList"
              :key="stream.value"
            >
              <div class="flex-x">
                <img
                  :src="stream.img"
                  alt=""
                  style="width: 18px; height: 18px;"
                />
                {{ stream.label }}
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    iWind: {
      type: Number,
      default: 0
    },
    showStreamIcon: {
      type: Boolean,
      default: false
    },
    checkList: {
      type: Array,
      default: () => []
    },
    codeStreamList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    iWind() {
      this.isCheck = -1;
    }
  },
  computed: {
    getStreamIcon() {
      return function(val) {
        return this.codeStreamList.find(item => item.value == val)?.imgf;
      };
    }
  },
  data() {
    return {
      isCheck: 0
    };
  },
  mounted() {},
  methods: {
    handleCommand(val, row) {
      this.$emit("handleCommand", row, val);
    },
    changeCheck(row, index) {
      this.isCheck = index;
      this.$emit("changeCheck", row, index);
    },
    dbChangeCheck(row) {
      this.$emit("onDbChangeCheck", row);
    }
  }
};
</script>

<style scoped lang="scss">
.check_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-right: 10px;
}
.check_list {
  cursor: pointer;
  .check_list_text {
    // color: #75fbfd;
    // 禁止双击选中
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: 15px;
    margin-left: 8px;
  }
}
</style>
